<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-05-21 18:48:16
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-05-29 17:21:52
 * @FilePath: /XMate-h5/src/views/badge/components/recordView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="record-view">
    <!-- 麦克风图标容器 -->
    <div
      class="mic-container"
      :class="{ 'is-recording': isRecording }"
      v-if="isRecording"
    >
      <div
        class="flex items-center justify-center p-[7px] rounded-full bg-gradient-to-b from-[#D5EAFB] to-[#CACFFE]"
      >
        <div class="bg-white rounded-full p-[2px] shadow-xs">
          <div
            class="flex items-center justify-center w-[70px] h-[70px] rounded-full bg-gradient-to-b from-[#ECF5FD] to-[#FCFCFE]"
          >
            <img src="@/icons/svg/badge/mircphone.svg" />
          </div>
        </div>
      </div>
    </div>

    <div class="mic-container" :class="{ 'is-recording': isRecording }" v-else>
      <div :class="`flex items-center justify-center p-[7px] rounded-full bg-[#F6F8FC]`">
        <div class="bg-white rounded-full p-[2px] shadow-xs">
          <div
            class="flex items-center justify-center w-[70px] h-[70px] rounded-full bg-white"
          >
            <img src="@/icons/svg/badge/mircphone_pause.svg" />
          </div>
        </div>
      </div>
    </div>

    <div class="flex flex-row items-center mt-5 gap-3">
      <!-- 条形波纹动画 -->
      <div class="wave-container" v-if="isRecording">
        <div class="wave-bar" v-for="n in 10" :key="n"></div>
      </div>
      <img class="h-[20px]" v-else src="@/icons/svg/badge/wave_icon.svg" alt="" />

      <div :class="`time-text ${isRecording ? 'gradient-text' : ''}`">
        {{ time }}
      </div>

      <!-- 条形波纹动画 -->
      <div class="wave-container" v-if="isRecording">
        <div class="wave-bar" v-for="n in 10" :key="n"></div>
      </div>
      <img class="h-[20px]" v-else src="@/icons/svg/badge/wave_icon.svg" alt="" />
    </div>

    <!-- 录制状态和时间 -->
    <div class="text-[#757575] text-[14px]">{{ status }}</div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

interface Props {
  isRecording: boolean;
  time: string; // 录制时间(秒)
}

const props = withDefaults(defineProps<Props>(), {
  isRecording: false,
  time: "",
});

const status = computed(() => {
  return props.isRecording ? "录制中" : "暂停";
});
</script>

<style scoped lang="less">
.record-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 45px;
  padding-bottom: 40px;
}

.mic-container {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

// 波纹动画
.ripple {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #4080ff;
  animation: ripple 2s linear infinite;

  &:nth-child(2) {
    animation-delay: -1s;
  }
}

.record-status {
  text-align: center;

  .gradient-text {
    background: linear-gradient(90deg, #ff4080 0%, #4080ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 20px;
  }

  .status-text {
    font-size: 16px;
    margin-bottom: 4px;
    font-weight: 500;
  }
}

// 条形波纹动画
.wave-container {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 18px;
}

.wave-bar {
  width: 2px;
  height: 100%;
  background: #5e30fc;
  border-radius: 2px;

  &:nth-child(1) {
    animation: waveAnim 600ms ease-in-out infinite;
    animation-delay: 0ms;
    background: #5341f9;
  }
  &:nth-child(2) {
    animation: waveAnim 700ms ease-in-out infinite;
    animation-delay: 100ms;
    background: #5143f8;
  }
  &:nth-child(3) {
    animation: waveAnim 800ms ease-in-out infinite;
    animation-delay: 200ms;
    background: #5243f9;
  }
  &:nth-child(4) {
    animation: waveAnim 900ms ease-in-out infinite;
    animation-delay: 300ms;
    background-color: #4752f6;
  }
  &:nth-child(5) {
    animation: waveAnim 1000ms ease-in-out infinite;
    animation-delay: 400ms;
    background: #4752f6;
  }
  &:nth-child(6) {
    animation: waveAnim 1100ms ease-in-out infinite;
    animation-delay: 500ms;
    background: #3173f1;
  }
  &:nth-child(7) {
    animation: waveAnim 1300ms ease-in-out infinite;
    animation-delay: 600ms;
    background: #2685ef;
  }
  &:nth-child(8) {
    animation: waveAnim 1400ms ease-in-out infinite;
    animation-delay: 0ms;
    background: #0ea7ea;
  }
  &:nth-child(9) {
    animation: waveAnim 1500ms ease-in-out infinite;
    animation-delay: 200ms;
    background: #0ea7ea;
  }
  &:nth-child(10) {
    animation: waveAnim 1600ms ease-in-out infinite;
    animation-delay: 300ms;
    background: #04b6e7;
  }
}

@keyframes waveAnim {
  0%,
  100% {
    height: 20%;
  }
  50% {
    height: 100%;
  }
}

@keyframes ripple {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes pulse-scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.animate-pulse-scale {
  animation: pulse-scale 2s ease-in-out infinite;
}

.time-text {
  font-weight: bold;
  line-height: 30px;
  font-size: 20px;
  color: #262626;
}

.time-text.gradient-text {
  background: linear-gradient(90deg, #03b8e7 0%, #691ffe 100%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: bold;
  line-height: 30px;
  font-size: 20px;
}
</style>
